<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:p="http://java.sun.com/jsf/html">

<head>
<script>
var images = new Array()
images[0] = "images/appareil_raclette.png";
images[1] = "images/fondu.jpg";
images[2] = "images/Fondu-Moulinex.jpg";
images[3] = "images/Fontaine-ChocolatTristar.jpg";
images[4] = "images/Friteuse-FAGOR.jpg";
images[5] = "images/machine_a_barbe_a_papa_420w_due40028.jpg";
images[6] = "images/machine_pop_corn.jpg";
images[7] = "images/SetWok-PRINCESS.jpg";
images[8] = "images/sorbetiere-simeo.jpg";
images[9] = "images/yaourtiere2.jpg";
<!--setTimeout("changeImage()", 30000);-->
var x=0;
var monInterval;

	monInterval = setInterval("changeImage()",5000);

function changeImage()
{
document.getElementById("img").src=images[x]
<!--x++;-->
<!--}-->
<!--function changeImage2()-->
<!--{-->
document.getElementById("img1").src=images[x+1]
<!--x++;-->
<!--}-->
<!--function changeImage3()-->
<!--{-->
document.getElementById("img2").src=images[x+2]
<!--x++;-->
<!--}-->
<!--function changeImage4()-->
<!--{-->
document.getElementById("img3").src=images[x+3]
x++;
if(x == images.length-3){
        x = 0;
    }
}

<!--function change(){-->
	<!--changeImage();-->
	<!--changeImage2();-->
	<!--changeImage3();-->
	<!--changeImage4();-->
<!--}-->
</script>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="generator" content="PSPad editor, www.pspad.com" />
<title>Emprunter et partager de l'électroménager en France -
	bienvenue à E-SHARING</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>

<body onload="changeImage()">
	<div class="topbar">
		<span class="toplink"><a href="connexion.jsf">Connexion</a> | <a
			href="inscription.jsf">Inscription</a></span> <span class="logo"><img
			src="images/ElecSharing-D5.png" /></span>
	</div>

	<div class="accueil" style="background-color:#DED7D0">
		<div class="accueiltext">
			<p>
				<table class="aempic">

					<tr>
						<td class = "temcols" align = "center"> <img id="img" src="images/yaourtiere2.jpg" class="aempics"/> </td> <!--"images/yaourtiere2.jpg"-->
						<td class = "temcols" align = "center"> <img id="img1" src="images/sorbetiere-simeo.jpg" class="aempics"/> </td><!--"images/machine_pop_corn.jpg-->
						<td class = "temcols" align = "center"> <img  id="img2" src="images/SetWok-PRINCESS.jpg" class="aempics"/> </td><!--images/Fondu-Moulinex.jpg-->
						<td class = "temcols" align = "center"> <img  id="img3" src="images//machine_pop_corn.jpg" class="aempics"/> </td>
					</tr>
					
					<tr>
						<td colspan="4" style = "text-align: center;">
							<h2 class="m-title" id="recherchetitle"><b>Rechercher de l'électroménager à emprunter !</b></h2>
							Saisir une marque, une catégorie, un type, un département ou des dates ciblées...<br /><br />

							<h:form action="rechercher.jsp" id="accueilrecherche">
	              				Quoi ? <h:inputText value="#{mbIndex.motCleRecherche}" id="cetaem" maxlength="80" class = "champrecherche" /> 
	              				Où ? <h:selectOneMenu style = "font: normal 14px/1.2em Calibri, Verdana, Helvetica;" id="boxDept" value="#{mbIndex.departementId}">
										<f:selectItems value="#{mbIndex.departements}" var="dept" itemLabel="#{dept.label}" itemValue="#{dept.value}" />
									 </h:selectOneMenu> 
	              				De <rich:calendar id="boxcalDe" inputSize="10" value="#{mbIndex.dateDebut}" />
	              				À <rich:calendar id="boxcalA" inputSize="10" value="#{mbIndex.dateFin}" />
								
								<h:commandButton type="submit" id="btnrechercher" value="Rechercher" action="#{mbIndex.rechercher}" style="background-color:#779e14 ;color:white"/><br />
								<i><h:outputLabel value="#{mbIndex.lblErr}" /></i><br /><br />
							</h:form>
						</td>
					</tr>

				</table>
			</p>
		</div>
	</div>

	<div class = "temoignages">
	  
	  <center>
	    <h:panelGrid columns="3" class = "les3temoins">
	      <tr>
	      
	        <td class = "temcols" align = "center">
	          <img src = "images/GeorgesForeman.jpg" class = "tempics" /><br />
	          "I love e-Sharing !" 
	        </td>
	      
	        <td class = "temcols" align = "center">
	          <img src = "images/Montebourg-Moulinex.jpg" class = "tempics" /><br />
	          "Ce site est chouette !"
	        </td>
	      
	        <td class = "temcols" align = "center">
	          <img src = "images/Screen shot 2011-07-03 at 9.22.38 PM.png" class = "tempics" /><br />
	          "I want to marry the founder !"
	        </td>
	        
	      </tr>
	    </h:panelGrid>
	   </center>
	
	</div>

	<table class="accueilenbas">
		<tr>
			<td class="accueilbascols">
				<h2 class="m-title">Vous voulez prêter un appareil ?</h2>
				<p>N’attendez plus : ajoutez-le aux appareils déjà présents sur
					le site et louez-le dès aujourd’hui !</p>
				<ul>
					<li>Fixez vous-même son tarif en €lectro</li>
					<li>Indiquez vos disponibilités</li>
					<li>Renseignez votre profil en quelques clics</li>
					<li>Ajoutez une jolie photo</li>
				</ul>
			</td>
			<td class="accueilbascols">
				<h2 class="m-title">Vous recherchez un appareil ?</h2>
				<p>Inscrivez vous dès à présent et trouvez un appareil proche de
					chez vous !</p>
				<ul>
					<li>Consultez les appareils déjà présents</li>
					<li>Trouvez-en un près de chez vous</li>
					<li>Rentrez en contact avec son propriétaire</li>
					<li>Faites-en bon usage</li>
				</ul>
			</td>
		</tr>
	</table>

	<div class="footer">
		<span style="float: left"> <a href="/trust">Confiance et
				sécurité</a> | <a href="/about/about-us">A propos</a>
		</span> <span style="float: right;"> <a href="">Facebook</a> | <a href="">Twitter</a> | <a href="">Google+</a>
		</span>
	</div>

</body>
</html>